<template>
  <div class="c-form-model">
    <a-form-model
      ref="formModel"
      :model="form"
      :rules="rules"
      :label-col="labelCol"
      :wrapper-col="wrapperCol"
    >
      <div v-for="(item, index) in datas" :key="index">
        <div>
          <a-form-model-item
            v-if="
              (item.type == 'text' || item.type == 'number' || !item.type) &&
                !item.hidden
            "
            :ref="item.prop"
            :label="item.label"
            :prop="item.prop"
          >
            <a-input
              :type="!item.type ? 'text' : item.type"
              v-model="form[item.prop]"
              :disabled="item.disabled"
              :placeholder="
                item.placeholder
                  ? item.placeholder
                  : '请输入' +
                    item.label +
                    (item.maxLength
                      ? '（' + item.maxLength + '个字符内' + '）'
                      : '')
              "
              :maxLength="item.maxLength"
            />
          </a-form-model-item>
          <a-form-model-item
            v-if="item.type == 'select' && !item.hidden"
            :label="item.label"
            :prop="item.prop"
          >
            <a-select
              :disabled="item.disabled"
              :showSearch="item.showSearch"
              :option-filter-prop="item.showSearch?'children':''"
              :mode="item.selectMode ? item.selectMode : ''"
              v-model="form[item.prop]"
              :placeholder="item.placeholder ||( item.showSearch?'请选择或搜索': '请选择') + item.label"
            >
              <a-select-option
                v-for="(sItem, idx) in item.typeData"
                :key="idx"
                :value="sItem.value"
                >{{ sItem.label }}</a-select-option
              >
            </a-select>
          </a-form-model-item>
          <a-form-model-item
            v-if="item.type == 'tree'"
            :label="item.label"
            :prop="item.prop"
          >
            <a-skeleton v-if="item.typeData.length==0" />
            <a-tree
             v-else
             :disabled="item.disabled"
              @check="onTreeCheck"
              :tree-data="item.typeData"
              :replace-fields="
                item.replaceFields ? item.replaceFields : replaceFields
              "
              :defaultExpandedKeys="form[item.prop]"
              checkable
              :checkedKeys="form[item.prop]"
              :checkStrictly="checkStrictly"
              :defaultExpandAll="
                item.defaultExpandAll
                  ? item.defaultExpandAll
                  : item.defaultExpandAll
              "
            >
              <!-- 树标题自定义 -->
              <template slot="custom" slot-scope="row">
                <p>
                  <span>{{ row.resourceName }}</span>
                  <span
                    class="tag"
                    :class="
                      row.type === 0
                        ? 'blue'
                        : row.type === 1
                        ? 'green'
                        : row.type === 2
                        ? 'blueSky'
                        : ''
                    "
                  >
                    [
                    {{
                      row.type === 0
                        ? "路由菜单"
                        : row.type === 1
                        ? "按钮"
                        : row.type === 2
                        ? "平台菜单"
                        : "菜单"
                    }}
                    ]
                  </span>
                </p>
              </template>
            </a-tree>
          </a-form-model-item>
          <a-form-model-item
            v-if="item.type == 'radio'"
            :label="item.label"
            :prop="item.prop"
          >
            <a-radio-group v-model="form[item.prop]"  :disabled="item.disabled">
              <a-radio
                :value="rItem.value"
                v-for="(rItem, idx) in item.typeData"
                :key="idx"
                >{{ rItem.label }}</a-radio
              >
            </a-radio-group>
          </a-form-model-item>
          <a-form-model-item
            v-if="item.type == 'tree-select'"
            :label="item.label"
            :prop="item.prop"
          >
            <a-tree-select
              allow-clear
              v-model="form[item.prop]"
              :tree-data="item.typeData"
              :placeholder="'请输入' + item.label"
              @change="onTreeSelectChange"
            >
            </a-tree-select>
          </a-form-model-item>
          <a-form-model-item
            v-if="item.type == 'textarea'"
            :label="item.label"
            :prop="item.prop"
          >
            <a-textarea
              :rows="item.rows ? item.rows : 4"
              v-model="form[item.prop]"
              :placeholder="
                item.placeholder
                  ? item.placeholder
                  : '请输入' +
                    item.label +
                    (item.maxLength
                      ? '（' + item.maxLength + '个字内' + '）'
                      : '')
              "
              :maxLength="item.maxLength"
            />
          </a-form-model-item>
          <a-form-model-item
            class="form-font-item"
            v-if="item.type == 'font'"
            :label="item.label"
            :prop="item.prop"
          >
            <span>{{ form[item.prop] }}</span>
          </a-form-model-item>
          <a-form-model-item
            v-if="item.type == 'slot'&& !item.hidden"
            :label="item.label"
            :prop="item.prop"
          >
            <slot :name="item.prop" :tableRow="item"></slot>
          </a-form-model-item>
        </div>
      </div>
    </a-form-model>
  </div>
</template>

<script>
export default {
  props: {
    datas: {
      type: Array,
      default: () => {
        return [];
      }
    },
    rules: {
      type: Object,
      default: () => {
        return {};
      }
    },
    refName: {
      type: String,
      default: ""
    },
    checkStrictly: {
      type: Boolean,
      default: false
    },
    labelCol: {
      type: Object,
      default: () => {
        return { span: 6 };
      }
    },
    wrapperCol: {
      type: Object,
      default: () => {
        return { span: 16 };
      }
    },
    value: {
      type: Object,
      default: () => {
        return {};
      }
    }
  },

  data() {
    return {
      form: {},
      replaceFields: {
        children: "children",
        title: "title",
        key: "key"
      },
      autoExpandParent: true,
      checkedKeys: []
    };
  },
  watch: {
    value(val) {
      this.form = val;
    }
  },
  created() {
    this.form = this.value;
  },
  mounted() {},

  methods: {
    onTreeCheck(checkedKeys, e) {
      this.$emit(
        "onTreeCheck",
        checkedKeys.checked,
        e.node.eventKey,
        e.checked
      );
    },
    changeTreeCheck(val) {
      this.form.resourceIds = val;
    },
    handleValidate() {
      const _this = this;
      return new Promise((resolve, reject) => {
        _this.$refs.formModel.validate(valid => {
          if (valid) {
            resolve(_this.form);
          } else {
            Promise.reject(new Error("valid"));
          }
        });
      });
    },
    onTreeSelectChange(value) {
      this.$emit("onTreeSelect", value);
    },
    resetForm() {
      this.$refs.formModel.resetFields();
    }
  }
};
</script>
<style lang="less" scoped>
.form-font-item {
  margin-bottom: 3px;
}
.tag {
  font-size: 6px;
  margin-left: 2px;
  filter: alpha(opacity=80); /*IE*/
  -moz-opacity: 0.8; /*火狐*/
  opacity: 0.8; /*opera (CSS3标准)*/
}
.blueSky {
  color: #2db7f5;
}
.blue {
  color: blue;
}
.green {
  color: green;
}
</style>
